<template>
  <div>
    <!-- {{this.$route.params.id}} -->

    <el-radio-group v-model="labelPosition" size="small">
      <el-radio-button label="left">左对齐</el-radio-button>
      <el-radio-button label="right">右对齐</el-radio-button>
      <el-radio-button label="top">顶部对齐</el-radio-button>
    </el-radio-group>
    <div style="margin: 20px;"></div>
    <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
      <el-form-item label="用户编号">
        <el-input v-model="post.user_id"></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="post.username"></el-input>
      </el-form-item>
      <el-form-item label="电话号码">
        <el-input v-model="post.tel" ></el-input>
      </el-form-item>

      <el-form-item label="密码">
        <el-input v-model="post.password" type="password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="submit" @click.prevent="submitForm($event)">提交</el-button>
        <el-button @click="reset" type="reset">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import php from '../../api/php.js';
export default {
  data() {
    return {
      name: "",
      age: "",
      labelPosition: "right",
      formLabelAlign: {
        username: "",
        tel: "",
        add_time: "",
        user_id: "",
        password: "",
      },
      post: []
    };
  },
  watch: {
    $route() {
      console.log("路由发生改变");
      this.fun();
    }
  },
  methods: {
    fun() {
      let id = this.$route.params.id;
      var that = this;
      that.$axios.get(php+"user_post.php?id=" + id).then(res => {
        // console.log(res.data)
        that.post = res.data;
        // console.log(that.post)
      });
    },
    reset() {
      //返回上一页
      window.history.back();
    },

    submitForm(event) {
      event.preventDefault();
      let formData = new FormData();
      //获取表单数据
      formData.append("username", this.post.username);
      formData.append("tel", this.post.tel);
      formData.append("user_id", this.post.user_id);
      formData.append("password", this.post.password);
      formData.append("id", this.$route.params.id);
      //判断表单数据是否为空，如果为空，则提示用户
      if (
        this.post.username == "" ||
        this.post.tel == "" ||
        this.post.user_id == "" ||
        this.post.password == "" 
      ) {
        this.$message({
          message: "请填写完整信息",
          type: "warning"
        });
        //终止代码往下执行
        return;
      }

      let id = this.$route.params.id;

      this.$axios
        .post(php+"user_edit.php?id=" + id, formData)
        .then(res => {
            // console.log(res.data);
          //   console.log(res);
          if (res.data == 1) {
            this.$message({
              message: "修改成功",
              duration: 1000,
              type: "success"
            });
            //返回上一页
            window.history.back();
          } else {
            this.$message({
              message: "未进行任何修改",
              type: "info",
              duration: 1500
            });
          }
        });
    }
  },

  mounted() {
    this.fun();
  }
};
</script>
